<template>
    <div>
        <el-dialog title="服务费管理" class="noselect"  :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm ">
                <!--<el-form-item label=" " prop="no" :rules="[-->
                    <!--{ required: true, message: '请输入服务费编号', trigger: 'blur' }-->
                <!--]">-->
                    <!--<el-input placeholder="请输入服务费编号" v-model="modelForm.no" :maxlength="5" size="medium">-->
                        <!--<template slot="prepend">-->
                            <!--<el-tooltip placement="top" content="（此项为必填项，只能填数字或字母！例如：A1001,A1002...）">-->
                                <!--<el-button tabIndex="-1">编号</el-button>-->
                            <!--</el-tooltip>-->
                        <!--</template>-->
                    <!--</el-input>-->
                <!--</el-form-item>-->
                <el-form-item label=" " prop="name" :rules="[
                    { required: true, message: '请输入服务费名称', trigger: 'blur' }
                ]">
                    <el-input placeholder="请输入服务费名称" v-model="modelForm.name" :maxlength="11" size="medium">
                        <template slot="prepend">
                            <el-tooltip placement="top" content="（此项为必填项，不能填写已有的名称！）">
                                <el-button tabIndex="-1">名称</el-button>
                            </el-tooltip>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label=" " prop="type" :rules="[
                    { required: true, message: '请选择收费方式', trigger: 'blur' }
                ]">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium">
                        <div class="el-input-group__prepend" tabindex="-1">费用类型</div>
                        <!--<el-tooltip placement="top" content="（请选择费用类型，此项为必选项！）">
                            <el-button tabIndex="-1">费用类型</el-button>
                        </el-tooltip>-->
                        <el-select placeholder="请选择费用类型"
                                   class="w-100p"
                                   @change="modelForm.value=''"
                                   v-model="modelForm.type">
                            <el-option
                                    v-for="item in way"
                                    :key="item.key"
                                    :label="item.text"
                                    :value="item.key">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item  label=" " prop="time" v-if="modelForm.type=='TIMING'" :rules="[{ required: true, message: '请选择时间', trigger: 'change' }]">
                    <el-row>
                        <el-col :span="3" class="text-center">
                           <span style="text-align: center"> 每</span>
                        </el-col>
                        <el-col :span="8">
                            <el-select placeholder="请选择" style="width: 100%;font-size: 12px" v-model="modelForm.time" size="medium">
                                <el-option
                                        v-for="item in time"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3" class="text-center">
                            分钟
                        </el-col>
                        <el-col :span="10" class="text-right">
                            <el-input placeholder="请输入消费值" @blur="isDouble(modelForm,'value')" v-model="modelForm.value" size="medium">
                                <template slot="append">元</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label=" " v-if="modelForm.type!='TIMING'"  prop="value" :rules="[
                      { required: true, message: '请输入消费值', trigger: 'blur',type:'number' },rules.numPot2
                ]">
                    <el-input placeholder="请输入消费值" v-model.number="modelForm.value" @blur="isNum(modelForm,'value')" size="medium">
                        <template slot="prepend">
                            <el-tooltip v-if="modelForm.type=='CONSUMPTION'" placement="top" content="（请填写最低消费，此项为必填项！）">
                                <el-button>最低消费</el-button>
                            </el-tooltip>
                            <el-tooltip v-if="modelForm.type=='FIXEDAMOUNT'" placement="top" content="（请填写固定加价，此项为必填项！）">
                                <el-button>固定加价</el-button>
                            </el-tooltip>
                            <el-tooltip v-if="modelForm.type=='PROPORTION'" placement="top" content="（请填写比例值，如10即10%，此项为必填项！）">
                                <el-button>比例值</el-button>
                            </el-tooltip>
                        </template>
                        <el-button slot="append" v-if="modelForm.type=='PROPORTION'">%</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label=""  prop="state" :rules="[]" >
                  <div class="el-input el-input-group el-input-group--prepend addprepend el-input--medium">
                    <div class="el-input-group__prepend addPrependText-medium" tabIndex="-1">
                      <span>状态</span>
                    </div>
                    <el-radio-group class="radio-group w-100p text-left" v-model="modelForm.state">
                      <el-radio class="radio"  label="NORMAL">正常</el-radio>
                      <el-radio class="radio"  label="DISABLED">禁用</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
            </el-form>
            <div class="foot-bar-button">
                <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
                <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径
    export default{
        props: ['isShow','id'],  //参数
        data(){
            return {
                modelForm: {
                },
                 showDialog:false,
                 activityId:"",
                 isSave:true,
                 time:[{label:"1",value:"1"},{label:"10",value:"10"},{label:"15",value:"15"},{label:"30",value:"30"},{label:"60",value:"60"}],
                 way:[]
            };
        },
        watch:{
            isShow:function(newValue,oldValue){
                this.showDialog=newValue;
                if(newValue){
                    if(this.id!=''){
                        this.activityId=this.id;
                        this.isSave=false;
                        this.$axios.get("pays/charges/"+this.activityId+"/update").then((data) => {
                            this.way=data.content.wayTypes;
                            this.modelForm=data.content.charge;

                        });
                    }else{
                        this.isSave=true;
                        this.$axios.get("pays/charges/create").then(data=>{
                            this.way=data.content.wayTypes;
                            this.modelForm=data.content.charge;
                            // this.modelForm.type=this.way[0].key;
                        });
                    }
                }
            }
        },
        created(){
            window.this = this;
        },
        methods: {
            greet(){

            },
            goBack() {
                this.router.go(-1);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.isSave){
                            this.$axios.post("pays/charges/create",this.modelForm).then(data=>{
                                if(data.status==200){
                                    this.$message({
                                        message:data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                }else{
                                    this.$message.error(data.message);
                                }
                            })
                        }else{
                            this.modelForm._method="PUT";
                            this.$axios.put("pays/charges/"+this.activityId+"/update",this.modelForm).then(data=>{
                                if(data.status==200){
                                    this.$message({
                                        message:data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                }else{
                                    this.$message.error(data.message);
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$emit('close');
                this.$refs[formName].resetFields();
                this.showDialog=false;
            },
            handleClose(done){
                this.$emit('close');
                done();
            },
            isNum(item,key){
                if(item.type=='PROPORTION'){
                    var r = /^\+?[1-9][0-9]*$/;
                    if( ! r.test(item[key])){
                        item[key]=""
                    }else{
                        item[key]=item[key];
                    }
                }else{
                    this.isDouble(item,key);
                }
            },
            isDouble(item,key){
                var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if( ! isNum.test(item[key])){
                    item[key]=""
                }else{
                    item[key]=item[key]*1;
                }
            }
        }
    }
</script>
<style scoped>

</style>
